<!-- MessageList.vue -->
<template>
    <div class="messages-container">
        <div v-for="(message, index) in messages" :key="index" class="message" :class="message.role">
            <div class="message-avatar">
                <el-avatar :size="32" :src="message.avatar"/>
            </div>
            <div class="message-content">
                {{ message.content }}
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
interface Message {
    role: 'user' | 'assistant'
    content: string
    avatar?: string
}

defineProps<{
    messages: Message[]
}>()
</script>

<style scoped>
.messages-container {
    display: flex;
    flex-direction: column;
    gap: 13px;
    line-height: 1.5; /* 添加行高确保可读性 */
}

.message {
    display: flex;
    gap: 12px;
    max-width: 80%;
    margin-bottom: 16px;
}

.message.user {
    margin-left: auto;
    flex-direction: row-reverse;
}

.message.assistant {
    margin-right: auto;
}

.message-content {
    padding: 12px;
    border-radius: 8px;
    background: #f5f7fa;
    word-break: break-word;
    font-size: 13px;  /* 添加字体大小 */
    line-height: 1.5; /* 添加行高确保可读性 */
}

.message.user .message-content {
    background: #409EFF;
    color: white;
    border-radius: 8px 8px 0 8px;
}

.message.assistant .message-content {
    background: #f4f6f8;
    color: #333;
    border-radius: 8px 8px 8px 0;
}

.message-avatar {
    flex-shrink: 0;
}
</style>